<template>
  <div>
    <div class="intex">
      <div class="topdiv">
        <div class="logodiv">
          <img src="../../assets/img/页面-1-index_03.gif" alt class="logo" />
          <input type="text" placeholder="按内容搜索" />
          <to-search class="toSearch"></to-search>
          <img src="../../assets/img/页面-1-index_06.gif" alt class="shangdian" />
        </div>
        <ul>
          <!-- 快速导航 -->
          <router-link :to="'/list?id='+item.id+'&type=1'" v-for="item in nav" :key="item.id">
            <li>
              {{item.catename}}
              <span></span>
            </li>
          </router-link>
        </ul>
      </div>
      <!-- <img src="../../assets/img/页面-1-index_15.gif" alt class="datu" /> -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in arr" :key="item.id">
          <img :src="$pre+item.img" alt />
        </van-swipe-item>
      </van-swipe>
      <div class="div1">
        <div class="div5ge">
          <section class="sec" v-for="item in arrHome" :key="item.id">
            <img v-bind:src="item.img" alt class="naozhong" />
            <p class="p1">{{item.text}}</p>
          </section>
        </div>
      </div>
      <div class="div6">
        <div class="div2">
          <img src="../../assets/img/页面-1-index_36.gif" alt class="img1" />
          <div class="div3">
            <img src="../../assets/img/页面-1-index_38.gif" alt />
            <img src="../../assets/img/页面-1-index_41.gif" alt />
          </div>
        </div>
        <div class="div4">
          <p>双11尖货预购</p>
          <p>畅购全球</p>
        </div>
        <div class="div5">
          <img src="../../assets/img/页面-1-index_45.gif" alt />
          <img src="../../assets/img/页面-1-index_47.gif" alt />
          <img src="../../assets/img/页面-1-index_48.gif" alt />
          <img src="../../assets/img/页面-1-index_50.gif" alt />
        </div>
      </div>
      <v-list></v-list>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
import { reqHomeCate } from "../../http/api";
import { reqBanner } from "../../http/api";

import vList from "./components/list.vue"

export default {
  components:{
    vList
  },
  data() {
    return {
      arrHome: [
        {
          id: 1,
          img: "../../assets/img/页面-1-index_19.gif",
          text: "限时抢购",
        },
        {
          id: 2,
          img: "../../assets/img/页面-1-index_21.gif",
          text: "畅销商品",
        },
        {
          id: 3,
          img: "../../assets/img/页面-1-index_23.gif",
          text: "品质大牌",
        },
        {
          id: 4,
          img: "../../assets/img/页面-1-index_26.gif",
          text: "小U商品",
        },
        {
          id: 5,
          img: "../../assets/img/页面-1-index_28.gif",
          text: "积分商城",
        },
      ],
      nav: [],
      arr: [],
    };
  },
  methods: {},
  mounted() {
    reqHomeCate(this.nav).then((res) => {
      if (res.data.code == 200) {
        this.nav = res.data.list;
      }
    });
    reqBanner().then((res) => {
      // console.log(res);
      this.arr = res.data.list;
    });
  },
};
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  text-align: center;
  background-color: #39a9ed;
  height: 3.75rem;
  vertical-align: center;
}
.my-swipe img {
  width: 100%;
  height: 100%;
}
.logo1 {
  width: 2.44rem;
  height: 0.48rem;
}
.logo2 {
  width: 0.4rem;
  height: 0.4rem;
}
input {
  width: 3.4rem;
  height: 0.65rem;
}
.box {
  width: 100vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  line-height: 0.65rem;
  background: linear-gradient(to bottom, #ff6040, #ff8a7f);
}
.intex {
  margin: 0 auto;
}
.topdiv {
  background: linear-gradient(to bottom, #ff6040, #ff8a7f);
}
.logodiv {
  height: 0.8rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.logodiv input {
  width: 3.4rem;
  height: 0.65rem;
  background: #ffffff url(../../assets/img/页面-1-index_09.gif) no-repeat left;
  background-size: 0.32rem 0.32rem;
  background-position: 0.2rem 0.2rem;
  border-radius: 2px;
}
.logo {
  width: 2.44rem;
  height: 0.48rem;
}
.shangdian {
  width: 0.4rem;
  height: 0.4rem;
}
.intex ul:nth-child(2) {
  height: 0.5rem;
  display: flex;
  justify-content: space-around;
  font-size: 0.25rem;
  color: white;
}
.intex ul:nth-child(2) li {
  line-height: 0.48rem;
}
.intex ul:nth-child(2) li:nth-child(7) {
  display: flex;
  align-items: center;
}
.intex ul:nth-child(2) li span {
  display: block;
  background-color: white;
  width: 0.7rem;
  height: 2px;
  display: none;
}
.intex ul li:hover span {
  display: block;
  font-size: 0.3rem;
}
.intex ul li:hover {
  font-size: 0.35rem;
}
.san {
  width: 0.25rem;
  height: 0.25rem;
  display: inline;
}
.datu {
  width: 6.7rem;
  height: 3.9rem;
  display: block;
  margin: 10px auto;
  box-shadow: 0 0.2rem 0.2rem #ffe2dc;
}
.div1 {
  margin: 0.47rem 0 0.4rem 0;
}
.div5ge {
  display: flex;
  justify-content: space-around;
}
.sec {
  height: 0.95rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.naozhong {
  width: 0.6rem;
  height: 0.6rem;
}
.p1 {
  line-height: 24px;
}
.div2 {
  height: 3.5rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.div3 {
  height: 3.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.div2 img:nth-child(1) {
  width: 3.5rem;
  height: 3.5rem;
}
.div3 img:nth-child(1) {
  width: 3.5rem;
  height: 1.7rem;
}
.div3 img:nth-child(2) {
  width: 3.5rem;
  height: 1.7rem;
}
.div4 {
  display: flex;
  justify-content: space-around;
}
.div4 p:nth-child(1) {
  font-size: 0.25rem;
  line-height: 0.75rem;
  color: #ff6040;
}
.div4 p:nth-child(2) {
  font-size: 0.25rem;
  line-height: 0.75rem;
  color: #999999;
}
.div5 {
  display: flex;
  justify-content: space-around;
}
.div5 img {
  width: 1.6rem;
  height: 0.48rem;
}
.div6 {
  border-top: 0.4rem;
  background-color: #f2f2f2;
  background-origin: border-box;
}
.div7 {
  display: flex;
  justify-content: space-around;
}
.div7 section {
  height: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.div7 section img {
  width: 0.36rem;
  height: 0.4rem;
}
.div7 p {
  font: 0.2rem;
  color: #999999;
}
.div7 section:nth-child(4) p {
  font: 0.2rem;
  color: #ff6040;
}
.spen1 {
  display: block;
  width: 2.7rem;
  height: 0.1rem;
  background-color: black;
  border-radius: 5px;
  margin: 5px auto;
}
</style>